<template>
    <div>
        <div class="category-list p-x-[50px] p-t-[50px]">
            <van-collapse v-model="activeIndex">
                <van-collapse-item
                    :title="item.name"
                    :name="index"
                    v-for="(item, index) in categoryList"
                    :key="item.name"
                    title-class="font-bold"
                >
                    <div
                        v-for="device in item.deviceList"
                        :key="device.name"
                        class="device-item"
                        @click="goDetail(device)"
                    >
                        <img
                            :src="device.img"
                            class="w-[200px] h-[150px]"
                        />
                        <div class="text-center">
                            <p>{{ device.name }}</p>
                            <p>{{ device.des }}</p>
                        </div>
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>

<script setup lang="ts">
    const categoryList = ref([
        {
            name: '家用呼吸机',
            deviceList: [
                {
                    name: '如意系列',
                    img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                    des: '睡眠治疗机型',
                },
                {
                    name: '如意系列',
                    img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                    des: '睡眠治疗机型',
                },
                {
                    name: '如意系列',
                    img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                    des: '睡眠治疗机型',
                },
                {
                    name: '如意系列',
                    img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                    des: '睡眠治疗机型',
                },
            ],
        },
        { name: '医用制氧机' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },

        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
        { name: '呼吸耗材' },
    ]);

    const activeIndex = ref<number[]>([]);

    const router = useRouter();
    const goDetail = () => {
        router.push('/instruction/detail');
    };
</script>

<style lang="scss" scoped>
    :deep(.category-list) {
        .van-collapse-item {
            margin-bottom: 20px;
            overflow: hidden;
            border-radius: $border-radius;
        }

        .van-cell {
            padding: 40px 55px;
        }

        .van-cell--clickable:active {
            background-color: #fff;
        }

        .van-collapse-item__title--expanded {
            // padding: 20px;

            // .title {
            //     font-size: 26px;
            // }

            // .van-icon-arrow {
            //     display: none;
            // }
        }
    }

    .title {
        font-size: 30px;
    }

    .device-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% - 80px);
        padding: 20px 40px;
        color: var(--van-cell-text-color);
        border-bottom: $border-dashed;
    }
</style>
